<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性</title>
</head>

<body>

  <pre>
    ★★★★★

    1、为什么需要计算属性，什么是计算属性

      在模板中使用表达式非常的便捷，但是如果在其中写很多的逻辑代码，
      那么程序就会非常难以维护，
      插值表达式中诞生的目的是做一些简单的运算，
      如果在里面写很多太复杂的逻辑，代码看起来非常冗余，缺少可读性

      所以：就提供了计算属性，
      目的：将表达式的代码进行提取，提取到计算属性中
  </pre>
  <div id="app">
    <p>{{msg}}</p>
    <p>{{msg.split('').reverse().join('')}}</p>

    <p>{{age===18?'成年了':'未知'}}</p>
    <p>{{ageH}}</p>

    <!-- 计算属性是一个属性，使用的时候不要带括号 -->
    <p>{{reverse}}</p>
  </div>
  <script src="./js/vue.js"></script>
  <script>

    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello',
        age: 18
      },
      emthods: {

      },

      // 计算属性需要写到 computed 当中
      computed: {
        // 计算属性声明的时候 是一个函数
        reverse: function () {
          // 必须要有return

          // 注意：计算属性的值依赖于data里的值，当data里的数据改变，返回值也会改变
          return this.msg.split('').reverse().join(',')
        },
        ageH:
          function () {
            return this.age === 18 ? '成年了' : '未知'
          }

      }

    })
  </script>
</body>

</html>